<%--
Created by IntelliJ IDEA.
User: 陪你度过漫长岁月
Date: 2022/8/5
Time: 11:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>数据菜单</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">开发环境</div>
            <div class="layui-card-body">
                Menu 数据菜单对普通菜单的深度封装
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<link rel="stylesheet" href="component/pear/css/pear.css"/>
								 并
								<script src="component/layui/layui.js"></script>
								 并
								<script src="component/pear/pear.js"></script>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">实例</div>
            <div class="layui-card-body">
                <button id="collapse" class="pear-btn">隐藏</button>
                <br/>
                <br/>
                <div id="sideMenu"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content layui-show">
							<pre class="layui-code" lay-encode="true">
								
								var sideMenu = menu.render({
								    elem: 'sideMenu',
								    async: true,
								    theme: "light-theme",
								    height: '300px',
								    control: false, 
								    defaultMenu: 0,
								    accordion: true,
								    url: "../../admin/data/menu.json",
								    parseData: false,
								    done: function() {
								        layer.msg("加载完成")
								    }
								});
								
								sideMenu.click(function(dom, data) {
								    
									layer.msg("菜单点击 : " + JSON.stringify(data));
								})
						</pre>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['layer', 'form',
        'element', 'menu', 'code', 'jquery'
    ], function () {
        var layer = layui.layer,
            menu = layui.menu,
            $ = layui.jquery,
            form = layui.form;

        layui.code();

        var sideMenu = menu.render({
            elem: 'sideMenu',
            async: true,
            theme: "light-theme",
            height: '300px',
            control: false,
            defaultMenu: 0,
            accordion: true,
            url: "../../admin/data/dataMenu.json",
            parseData: false,
            done: function () {
                layer.msg("加载完成")
            }
        });

        sideMenu.click(function (dom, data) {
            layer.msg("菜单点击 : " + JSON.stringify(data));
        })

        $("#collapse").click(function () {
            sideMenu.collapse();
        })
    });
</script>
</html>
